<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Public/css/bootstrap/css/bootstrap.css">
    <!--<link rel="stylesheet" href="./Public/css/iframe.css">-->
    <link rel="stylesheet" href="./Public/css/wwei_editor.css">
    <link rel="stylesheet" href="./Public/wxeditor/js/ueditor1_4_3/third-party/codemirror/codemirror.css">
    <!--<link rel="stylesheet" href="./Public/wxeditor/css/jquery.jgrowl.css">-->

    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="./Public/css/bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="./Public/css/bootstrap/css/ie.css">
    <![endif]-->

    <!--编辑器-->
    <script type="text/javascript" src="./res/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./Public/css/bootstrap/js/bootstrap.min.js"></script>
    <!--<script type="text/javascript" src="./Public/wxeditor/css/jquery.jgrowl.min.js"></script>-->
    <!--<script type="text/javascript" src="./Public/wxeditor/js/less.js"></script>-->
    <script type="text/javascript" src="./Public/wxeditor/js/ueditor1_4_3/ueditor.config.js"></script>
    <script type="text/javascript" src="./Public/wxeditor/js/ueditor1_4_3/ueditor.all.min.js"></script>
    <script type="text/javascript" src="./Public/wxeditor/js/ueditor1_4_3/third-party/codemirror/codemirror.js"></script>
    <script type="text/javascript" src="./Public/wxeditor/js/ueditor1_4_3/third-party/zeroclipboard/ZeroClipboard.min.js"></script>
    <script type="text/javascript" src="./Public/wxeditor/js/wwei_editor.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <h4>正文模板样式定义</h4>
        <hr>
        <!--左边的文章区域-->
        <div class="span5">
            <!--左边导航-->
            <ul class="nav nav-tabs" id="templateTab">
                <li class="active"><a href="#temp-title" data-type="title" data-url="view/temp-title.html">标题</a></li>
                <li><a href="#temp-text" data-type="text" data-url="view/temp-text.html">正文</a></li>
                <li><a href="#temp-img" data-type="img" data-url="view/temp-img.html">图片</a></li>
                <li><a href="#temp-follow" data-type="follow" data-url="view/temp-follow.html">吸粉</a></li>
                <li><a href="#temp-scene" data-type="scene" data-url="view/temp-scene.html">场景</a></li>
            </ul>
            <!--左边内容区-->
            <div class="tab-content template-content">
                <div class="tab-pane active" id="temp-title"></div>
                <div class="tab-pane" id="temp-text"></div>
                <div class="tab-pane" id="temp-img"></div>
                <div class="tab-pane" id="temp-follow"></div>
                <div class="tab-pane" id="temp-scene"></div>
            </div>
        </div>
        <!--右边的编辑区域-->
        <div class="span7" id="wxcontent">
            <fieldset>
                <div>
                    <span class="pull-right">
                        <a href="javascript:void(0);" id="clear-editor" class="btn btn btn-danger disabled">清空</a>
                    </span>
                    <label>正文</label>
                </div>
                <div style="clear:both"></div>
                <div><div id="wwei_editor" type="text/plain" style="width:540px;height:600px;"></div></div>
            </fieldset>
        </div>
    </div>

</div>
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        $('#templateTab a').eq(0).click();
    }
    var wwei_editor = UE.getEditor('wwei_editor', {
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        allowDivTransToP: false//阻止div标签自动转换为p标签
    });
    /*模板Tab */
    var dataType = 'title';
    $('#templateTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        dataType = $(this).attr("data-type");
        $(".template-content .active").load($(this).data("url"), function () {
            console.dir(this)
            console.log("aaaa:"+dataType)
            var tabPane = $("#temp-"+dataType);
            var _tempLi = tabPane.find('.template-list li');
            //鼠标经过样式
            _tempLi.hover(function(){
                $(this).css({"background-color":"#f5f5f5"});
            },function(){
                $(this).css({"background-color":"#fff"});
            });
            _tempLi.click(function(){
                if(dataType=='tpl'){
                    console.log(dataType=='tpl')
                    var _tempHtml = $(this).find('.tpl-code').html();

                    wwei_editor.setContent("");
                    wwei_editor.execCommand('insertHtml', _tempHtml);
                }else{
                    var _tempHtml = $(this).html();
                    insertHtml(_tempHtml + "<p><br/></p>");
                }

            });
        });

    });
    //清空
    $('#clear-editor').click(function(){
        if(confirm('是否确认清空内容，清空后内容将无法恢复')){
            wwei_editor.setContent("");
        }
    });

</script>